<template>
  <van-row class="mobile-profile">
    <van-row class="top" v-if="memberInfo">

      <van-row>
        <van-col span="8">用户名:</van-col>
        <van-col span="16">{{memberInfo.username}}</van-col>
      </van-row>
      <van-row>
        <van-col span="8">盘口:</van-col>
        <van-col span="16">{{memberInfo.handicaps}}</van-col>
      </van-row>
      <van-row>
        <van-col span="8">额度:</van-col>
        <van-col span="16">{{memberInfo.hk_account_amount}}+{{memberInfo.qk_account_amount}}</van-col>
      </van-row>
      <van-row>
        <van-col span="8">余额:</van-col>
        <van-col span="16">{{memberInfo.hk_remaining_amount}}+{{memberInfo.qk_remaining_amount}}</van-col>
      </van-row>

    </van-row>

    <van-row class="option" v-if="memberInfo">

      <van-collapse v-model="activePanName">
        <van-collapse-item :title="memberInfo.games[gameCode]" :name="gameCode" class="item">
          <div slot="title" class="title">{{memberInfo.games[gameCode]}} </div>
          <van-row class="game-container">
            <van-col v-for="(title,code) in memberInfo.games" :key="`memberInfoGames${code}`" span="8">
              <div @click="(gameCode = code) && (activePanName = [])" class="game"> {{title}} </div>
            </van-col>
          </van-row>
        </van-collapse-item>
      </van-collapse>

    </van-row>

    <van-row class="list" v-if="list">

      <van-row v-for="(item,index) in list" :key="`mobileProfile${index}`" class="item">
        <van-row class="title"> {{item.comm_name}} </van-row>
        <van-row class="detail">
          <van-col span="8">
            <van-row> 单注最低 </van-row>
            <van-row> {{item.order_min_amount}} </van-row>
          </van-col>
          <van-col span="8">
            <van-row> 单注最高 </van-row>
            <van-row> {{item.order_min_amount}} </van-row>
          </van-col>
          <van-col span="8">
            <van-row> 单期最高 </van-row>
            <van-row> {{item.period_max_amount}} </van-row>
          </van-col>
        </van-row>
      </van-row>

    </van-row>
  </van-row>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { Row, Col, Collapse, CollapseItem } from 'vant'

  export default {
    components: {
      [Row.name]: Row,
      [Col.name]: Col,
      [Collapse.name]: Collapse,
      [CollapseItem.name]: CollapseItem,
    },

    computed: {
      ...mapGetters(['memberGameSelected', 'memberGames', 'memberInfo']),
      list() {
        if (this.gameCode) {
          return this.memberInfo.commissions[this.gameCode]
            ? Object.values(this.memberInfo.commissions[this.gameCode])
            : []
        }
      },
    },

    data() {
      return {
        loading: false,
        gameCode: null,
        activePanName: [],
      }
    },

    // 数据格式化
    filters: {},

    created() {
      if (this.memberInfo) {
        this.gameCode = Object.keys(this.memberInfo.commissions)[0]
      }
    },

    methods: {},
    watch: {},
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import 'src/styles/variables.scss';
  .mobile-profile {
    text-align: center;
    .top {
      background-color: #fff;
      .van-row {
        padding: 8px 0;
        border-bottom: 1px solid $bgc;
        .van-col:last-of-type {
          color: $linkActive;
        }
      }
    }

    .option {
      margin-top: 3px;
      .item {
        .title {
          @extend .bg;
          padding: 5px 20px;
        }
        .game-container {
          .game {
            @extend .bg;
            font-size: 14px;
            padding: 10px 0;
          }
        }
      }
    }

    .list {
      // margin-top: 3px;
      .item {
        background-color: #fff;
        margin: 3px 0;
        .title {
          color: rgb(96, 96, 96);
          padding: 5px 0;
          border-bottom: 1px solid $bgc;
        }
        .detail {
          font-size: 13px;
          .van-col {
            border-left: 1px solid $bgc;
            .van-row {
              padding: 3px 0;
            }
            .van-row:first-of-type {
              color: rgb(84, 84, 84);
            }
            .van-row:last-of-type {
              color: $linkActive;
            }
          }
          .van-col:first-of-type {
            border: none;
          }
        }
      }
    }
  }
</style>

